<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="header">
      <el-breadcrumb-item :to="{ path: '/main' }" >首页</el-breadcrumb-item>
      <el-breadcrumb-item >招聘扶贫助农宣传志愿者无数名</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
        <el-form :model="info" class="left">
          <el-image :src="info.picture" class="img"></el-image>
        </el-form>
        <el-form :model="info" label-width="80px" class="right">
            <p>招聘扶贫助农宣传志愿者无数名</p>
            <el-form-item label="职位">
            <el-input v-model="info.position"></el-input>
          </el-form-item>
          <el-form-item label="招聘要求">
            <el-input v-model="info.work_require"></el-input>
          </el-form-item>
          <el-form-item label="工资待遇">
            <el-input v-model="info.work_salary"></el-input>
          </el-form-item>
          <el-form-item label="工作地点">
            <el-input v-model="info.vwork_place"></el-input>
          </el-form-item>
          <el-form-item label="工作时间">
            <el-input v-model="info.work_time"></el-input>
          </el-form-item>
          <el-form-item label="招聘人数">
            <el-input v-model="info.recruits_num"></el-input>
          </el-form-item>
          <el-form-item label="招聘时间">
            <el-input v-model="info.recruits_time"></el-input>
          </el-form-item>
          <el-form-item label="截止时间">
            <el-input v-model="info.recruits_end_time"></el-input>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="info.lead"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="info.contact"></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-input v-model="info.release_date"></el-input>
          </el-form-item>
          <el-form-item label="点击次数">
            <el-input v-model="info.click_num"></el-input>
          </el-form-item>
          <el-button type="" class="btn"  @click="$router.push('/VolunteerInfo2/')">应聘</el-button>
        </el-form>
    </div>
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: null,

    };
  },
  methods: {
    async getInfo(id) {
      let { data: res } = await this.$axios.get(
        "/volunteer/getlist?pageNum=1&pageSize=3&id=" + id
      );
      this.info = res.data.list[0];
      window.console.log(res);
    },
  },
  created() {
    let id = this.$route.params.id;
    this.getInfo(id);
  },
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #00b8e6;
  line-height: 40px;
  width: 60%;
  margin: 0 auto;
  border-radius: 5px;
}
.main {
  width: 20%;
  margin: 30px auto;
  .left {
    position: absolute;
    left: 340px;
    height: 350px;
    width: 350px;
    .img {
      height: 350px;
      width: 350px;
      box-shadow: 0 0 5px 0px #00b8e6;
      border-radius: 10px;
    }
  }
  .right{
      right: 500px;
      position: absolute;
    }
}
.btn{
    box-shadow: 0 0 8px 1px #00b8e6;
}


</style>